<template>
  <div class="bottom-operation">
    <div class="left-container">
      <van-button :disabled="isMoving || diceRolling" round @click="listVisible = true">任务列表</van-button>
    </div>
    <div class="left-container">
      <van-button :disabled="isMoving || diceRolling" round type="primary" @click="historyVisible = true">历史记录</van-button>
    </div>
    <Dice class="dice-button"></Dice>
    <BaseDrawer v-model="historyVisible" title="历史记录" :style="{ height: '80%' }">
      <ul class="history-tasks">
        <li
          :class="`histry-${playersConfig[task.playerIndex].color}`"
          v-for="(task, index) in dataStore.historyTasks"
          :key="task.chessIndex + '' + task.playerIndex"
        >
          {{ playersConfig[task.playerIndex].name }}回合{{ index + 1 }}: {{ dataStore.tasks[task.chessIndex] }}
        </li>
      </ul>
    </BaseDrawer>
    <BaseDrawer
      v-model="listVisible"
      title="任务列表"
      :style="{ height: '80%' }"
    >
      <div class="drawer-container">
        <div class="task-input-container">
          <ul>
            <li v-for="(item, index) in dataStore.tasks">任务{{index + 1}}：{{ item }}</li>
          </ul>
        </div>
        <VanButton
          type="primary"
          round
          @click="listVisible = false; editVisible = true"
        >修改任务列表</VanButton>
      </div>
    </BaseDrawer>
    <BaseDrawer 
      v-model="editVisible"
      title="修改任务列表"
      sub-title="请注意，修改任务列表会重置游戏"
      :style="{ height: '100%' }"
    >
      <div class="drawer-container">
        <div class="task-input-container">
          <van-field
            v-model="taskInput"
            rows="15"
            class="task-input"
            type="textarea"
            placeholder="请输入任务列表，以换行符分割"
          />
        </div>
        <VanButton
          type="primary"
          round
          @click="confirmEditHandler"
        >保存</VanButton>
      </div>
    </BaseDrawer>
  </div>
</template>

<script setup lang="ts">
import Dice from './Dice.vue';

const { dataStore, isMoving, diceRolling, coordinates, initGame } = useFlight();
const historyVisible = ref(false)
const editVisible = ref(false)
const listVisible = ref(false)
const taskInput = ref(dataStore.value.tasks.join('\n'))

function confirmEditHandler() {
  const newTasks = taskInput.value.split('\n').slice(0, coordinates.length);
  if (newTasks.length < coordinates.length) {
    for (let i = newTasks.length; i < coordinates.length; i++) {
      newTasks.push(`任务${i + 1}`)
    }
  }
  dataStore.value.tasks = newTasks
  initGame()
  editVisible.value = false
}
</script>

<style lang="scss" scoped>
.bottom-operation {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  .dice-button {
    position: absolute;
    left: calc(50% - 30px);
  }
}
.history-tasks {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    padding: 4px 8px;
    border: 2px solid #f0f0f0;
    border-radius: 8px;
    margin-bottom: 10px;
    line-height: 20px;

    &.histry-red {
      border-color: #ff4d4f;
    }
    &.histry-blue {
      border-color: #108ee9;
    }
  }
}
.drawer-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  .task-input-container {
    flex: 1;
    overflow: auto;
    .task-input {
      border: 1px solid #f0f0f0;
    }

    ul {
      li {
        padding: 5px 8px;
        border: 2px solid rgba(85, 235, 192, 0.6);
        border-radius: 8px;
        margin-bottom: 10px;
        line-height: 20px;
      }
    }
  }
}
</style>
